<template>
  <div>
    <div style="display: flex">
      <el-input v-model="flowKey" :disabled="true" />
      <search-button text="选择" @click="handleFlowSelect" />
    </div>
    <drag-dialog v-model="visible" width="1000px" title="流程选择">
      <el-table :data="deploymentList">
        <el-table-column label="模型名称" prop="name" :show-overflow-tooltip="true" min-width="160" />
        <el-table-column label="模型编码" prop="key" :show-overflow-tooltip="true" min-width="180" />
        <el-table-column label="模型ID" prop="id" width="200" />
        <el-table-column label="部署ID" prop="deploymentId" width="200" />
        <el-table-column label="操作" align="center" width="100">
          <template #default="scope">
            <text-add-button text="选择" @click="handleChooseDeployment(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="page.pageNum" v-model:limit="page.pageSize" @pagination="getDeploymentList" />
    </drag-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { search } from '@wf/api/wf/deployment';

export default defineComponent({
  name: 'FlowSelector',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      flowKey: '',
      visible: false,
      page: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      deploymentList: []
    };
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.flowKey = newVal;
      },
      immediate: true
    },
    flowKey: {
      handler(newVal) {
        this.$emit('update:modelValue', newVal);
      }
    }
  },
  mounted() {
    this.getDeploymentList();
  },
  methods: {
    handleFlowSelect() {
      this.visible = true;
    },
    handleChooseDeployment(row) {
      this.flowKey = row.key;
      this.cancel();
    },
    async getDeploymentList() {
      return search(this.page).then((res) => {
        this.deploymentList = res.data.list;
        this.total = res.data.total;
      });
    },
    cancel() {
      this.visible = false;
    }
  }
});
</script>
